import React from "react";
import { View } from "@tarojs/components";
import { AtList, AtListItem } from "taro-ui";
import useNavigation from "@/uses/useNavigation";

const Index: Taro.FC = () => {
  const navigation = useNavigation();
  return (
    <View>
      <AtList>
        {componentDatas.map((item, index) => {
          const { title, path } = item || ({} as any);
          return (
            <AtListItem
              key={index}
              title={title}
              onClick={() => {
                navigation.push(path);
              }}
            />
          );
        })}
      </AtList>
    </View>
  );
};
export default Index;

const componentDatas = [
  {
    title: "FlowList",
    path: "/pages/example/flowlist/index"
  },
  {
    title: "VirtualList",
    path: "/pages/example/virtuallist/index"
  },
  {
    title: "Image",
    path: "/pages/example/image/index"
  },
  {
    title: "Picker",
    path: "/pages/example/picker/index"
  },
  {
    title: "NoData",
    path: "/pages/example/no-data/index"
  },
  {
    title: "TitleBar",
    path: "/pages/example/title-bar/index"
  },
  {
    title: "AuthButton",
    path: "/pages/example/authButton/index"
  },
  {
    title: "Dialog",
    path: "/pages/example/dialog/index"
  },
  {
    title: "ImageUploader",
    path: "/pages/example/image-uploader/index"
  },
  {
    title: "Modal",
    path: "/pages/example/modal/index"
  },
  {
    title: "FloatLayout",
    path: "/pages/example/float-layout/index"
  },
  {
    title: "upload-oss",
    path: "/pages/example/upload-oss/index"
  },
  {
    title: 'nav',
    path: '/pages/example/nav/index'
  }
];
